<template>
  <div class="modal fade" :id="data.id">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-6" v-text="data.title"></h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <slot name="body"></slot>
        </div>
        <div class="modal-footer cs-flex-inner-center-center">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CsModal",
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          id: "modal",
          title: "标题",
        };
      },
      validator: (value) => {
        // 自定义验证器函数
        return typeof value.id === "string" && typeof value.title === "string";
      },
    },
  },
};
</script>
<style scoped>
.modal-header {
  height: 45px;
}
.btn-close {
  font-size: 0.8rem;
}
.modal.show .modal-dialog {
  margin-top: 50vh;
  transition: transform 0.3s ease-out;
  transform: translateY(-50%);
}
</style>
